<template>
    <transition name="drop" appear>
      <div v-if="MessageIsShow"
           :class="['message-' + type,{'center':center}]"
           class="message-container" @dblclick="closeMyself">
        <span v-text="message"></span>
        <span @click="closeMyself">×</span>
      </div>
    </transition>
</template>

<script>
export default {
  name: 'alert',
  data() {
    return {
      MessageIsShow: true,
      timer: null,
      CloseIconIsShow: false,
      center: false,
      postype: '',
    };
  },
  methods: {
    closeMyself() {
      this.MessageIsShow = false;
    },
  },
  created() {
    this.CloseIconIsShow = !this.duration;
  },
  mounted() {
    if (this.duration) {
      this.timer = setTimeout(() => {
        this.MessageIsShow = false;
      }, this.duration);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped lang="scss">
  .message-container{
    user-select: none;
    width: 300px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    margin-left: 35vw;
    border-radius: 20px;
    top: 20px;
  }
  .drop-enter, .drop-leave-to{
    top: -40px;
    opacity: 0;
  }
  .drop-enter-active, .drop-leave-active{
    transition: all 0.3s ease-in;
  }
  .drop-enter-to, .drop-leave{
    top: 30px;
    opacity: 1;
  }
  .center{
    text-align: center;
  }
  $type:(
    info:(background: #39f,color:white,borderColor:#39b),
    success:(background: #0c6,color:white,borderColor:#0b6),
    warning:(background: #f90,color:white,borderColor:#f60),
    error:(background: #f30,color:white,borderColor:#f10),
  );
  @each $m in map_keys($type) {
    .message-#{$m}{
      background-color: map_get(map_get($type, $m), background);
      color: map_get(map_get($type, $m), color);
      border-color: map_get(map_get($type, $m), border);
    }
  }

</style>
